<template>
  <view>
    <view v-if="nav && nav.data && nav.data.length > 0" class="nav">
      <view class="item" v-for="item in nav.data" :key="item.id" @click="handleNav(item)">
        <v-image :url="item.image.path" v-if="item.image" :width="'100rpx'" :height="'100rpx'" :is-fade="true" :duration="10" />
        <view class="text">{{ item.name }}</view>
      </view>
    </view>
    <u-skeleton v-else class="ske" :loading="true" :animate="true" :rows="2" avatar></u-skeleton>
  </view>
</template>

<script>

import Image from '../../../../components/image/index'

import { goTo } from '../../../../util/util'

export default {
  props: ['nav'],
  components: {
    'v-image': Image,
  },
  data() {
    return {

    }
  },
  methods: {
    handleNav(item) {
      goTo(item)
    }
  },
  created() {

  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.nav {
  background: white;
  margin: 20rpx;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 20rpx 0;
  row-gap: 20rpx;
  border-radius: 10rpx;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .text {
      font-size: 24rpx;
      height: 44rpx;
      line-height: 44rpx;
    }
  }
}
.ske {
  margin: 20rpx;
}
</style>
